<?php
	// Tab 1
	$name = array(
		'name'	=> 'name',
		'id'	=> 'name',
		'class'	=> 'input ui-corner-all',
		'style' => 'width: 400px',
		'value' => set_value('name'),
	);
	
	$code = array(
		'name'	=> 'code',
		'id'	=> 'code',
		'class'	=> 'input ui-corner-all',
		'value' => set_value('code'),
	);
	
	$description = array(
		'name'	=> 'description',
		'id'	=> 'description',
		'style' => 'width: 770px',
		'value' => set_value('description'),
	);
	
	
	// Tab 2
	$price = array(
		'name'	=> 'price',
		'id'	=> 'price',
		'class'	=> 'input ui-corner-all fl',
		'value' => set_value('price'),
	);
	
	$quantity = array(
		'name'	=> 'quantity',
		'id'	=> 'quantity',
		'class'	=> 'input ui-corner-all fl',
		'value' => set_value('quantity'),
	); 
	
	$cost = array(
		'name'	=> 'cost',
		'id'	=> 'cost',
		'class'	=> 'input ui-corner-all fl',
		'value' => set_value('cost'),
	);
	
	$minium = array(
		'name'	=> 'minium',
		'id'	=> 'minium',
		'class'	=> 'input ui-corner-all fl',
		'value' => set_value('minium'),
	); 
	
	$substock = array( // tru luong hang trong kho
		'name'	=> 'substock',
		'id'	=> 'substock',
		'class'	=> 'input ui-corner-all fl',
		'value' => set_value('substock'),
	);
	
	$sku = array(
		'name'	=> 'sku',
		'id'	=> 'sku',
		'class'	=> 'input ui-corner-all fl',
		'value' => set_value('sku'),
	); 
	
	$position = array(
		'name'	=> 'position',
		'id'	=> 'position',
		'class'	=> 'input ui-corner-all fl',
		'style' => 'width: 50px; text-align: center',
		'value' => set_value('position', 0),
	);
	
	$weight = array(
		'name'	=> 'weight',
		'id'	=> 'weight',
		'class'	=> 'input ui-corner-all fl',
		'value' => set_value('weight'),
	);
	
	$length = array(
		'name'	=> 'length',
		'id'	=> 'length',
		'class'	=> 'input ui-corner-all fl',
		'style' => 'width: 30px; text-align: center',
		'value' => set_value('length'),
	);
	
	$width = array(
		'name'	=> 'width',
		'id'	=> 'width',
		'class'	=> 'input ui-corner-all fl',
		'style' => 'width: 30px; text-align: center',
		'value' => set_value('width'),
	);
	
	$height = array(
		'name'	=> 'height',
		'id'	=> 'height',
		'class'	=> 'input ui-corner-all fl',
		'style' => 'width: 30px; text-align: center',
		'value' => set_value('height'),
	);
	
	$updated = array( // tru luong hang trong kho
		'name'	=> 'updated',
		'id'	=> 'updated',
		'class'	=> 'input ui-corner-all fl',
		'value' => set_value('updated'),
	);
	
	//Tab SEO
	$tags = array(
		'name'	=> 'tags',
		'id'	=> 'tags',
		'class'	=> 'input ui-corner-all',
		'style' => 'width: 400px',
		'value' => set_value('tags'),
	);
	
	$alias_uri = array(
		'name'	=> 'alias_uri',
		'id'	=> 'alias_uri',
		'class'	=> 'input ui-corner-all',
		'style' => 'width: 400px',
		'value' => set_value('alias_uri'),
	);
	
	$meta_keyword = array(
		'name'	=> 'meta_keyword',
		'id'	=> 'meta_keyword',
		'class'	=> 'input ui-corner-all',
		'style' => 'height: 50px',
		'value' => set_value('meta_keyword'),
	);
	
	$meta_description = array(
		'name'	=> 'meta_description',
		'id'	=> 'meta_description',
		'class'	=> 'input ui-corner-all',
		'style' => 'height: 50px',
		'value' => set_value('meta_description'),
	);
?>
<div class="container_12" id="body">
	<div class="grid_12">
		<div class="b10">
			<div style="text-align: right;">
				<button id="btn_update">Lưu</button> 
				<?php echo anchor('backend/product', 'Hủy', 'class="button" id="btn_cancel"');?>
			</div>
			<?php if ($message): ?>
			<div style="margin: 20px auto; padding: 1em;" class="ui-state-highlight ui-corner-all"> 
				<p><span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
				<strong>Hey!</strong> <?php echo $message; ?></p>
			</div>
			<div class="clear"></div>
			<?php endif;?>
		</div>
		<div id="tabs" class="b10">
			<ul>
				<li><a href="#tabs-product">Sản phẩm</a></li>
				<li><a href="#tabs-details">Dữ liệu</a></li>
				<li><a href="#tabs-images">Hình ảnh</a></li>
				<li><a href="#tabs-relations">Liên quan</a></li>
				<li><a href="#tabs-attributes">Thuộc tính</a></li>
				<li><a href="#tabs-specials">Khuyến mãi</a></li>
				<li><a href="#tabs-seo">SEO</a></li>
			</ul>
			<div id="tabs-product">
				<div>
					<?php echo form_label('Tên sản phẩm', 'name'); ?>
					<?php echo form_input($name); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Mã sản phẩm', 'code'); ?>
					<?php echo form_input($code); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Trạng thái', 'status'); ?>
					<?php echo form_dropdown('status', array(1 => 'Bật', 0 => 'Tắt'), NULL, 'class="input ui-corner-all"'); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Mô tả', 'description'); ?>
					<?php echo form_textarea($description); ?>
					<div class="clear"></div>
				</div>
			</div>
			<div id="tabs-details">
				<div>
					<?php echo form_label('Giá bán', 'price'); ?>
					<?php echo form_input($price); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Số lượng', 'quantity'); ?>
					<?php echo form_input($quantity); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Chi phí', 'cost'); ?>
					<?php echo form_input($cost); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Thuế suất', 'tax_id'); ?>
					<?php echo form_dropdown('status', array('Không'), NULL, 'class="input ui-corner-all fl"'); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Vận chuyển (Shipment)', 'shipping'); ?>
					<label for="shipping_yes" style="width: 70px"><input type="radio" name="shipping" id="shipping_yes" value="1" checked="checked" /> Có</label>
					<label for="shipping_no" style="width: 70px"><input type="radio" name="shipping" id="shipping_no" value="0" /> Không</label>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Cập nhật số tồn kho', 'substock'); ?>
					<label for="substock_yes" style="width: 70px"><input type="radio" name="substock" id="substock_yes" value="1" checked="checked" /> Có</label>
					<label for="substock_no" style="width: 70px"><input type="radio" name="substock" id="substock_no" value="0" /> Không</label>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Thông báo hết hàng', 'stock_status_id'); ?>
					<?php echo form_dropdown('status', array(1 => 'Chờ 2-3 ngày nữa', 2 => 'Còn hàng', 3 => 'Hết hàng', 4 => 'Đặt hàng trước'), 3, 'class="input ui-corner-all fl"'); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Ngày cập nhật', 'updated'); ?>
					<?php echo form_input($updated); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Mã kho (SKU)', 'sku'); ?>
					<?php echo form_input($sku); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Vị trí', 'position'); ?>
					<?php echo form_input($position); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Dài - Rộng - Cao', 'size'); ?>
					<?php echo form_input($length); ?> 
					<?php echo form_input($width); ?> 
					<?php echo form_input($height); ?>
					<select class="input ui-conner-all fl">
						<option value="0">Centimet</option>
						<option value="1">Met</option>
						<option value="2">Inch</option>
					</select>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Trọng lượng', 'weight'); ?>
					<?php echo form_input($weight); ?>
					<select class="input ui-conner-all fl">
						<option>Kilogams</option>
						<option>Gams</option>
					</select>
					<div class="clear"></div>
				</div>
			</div>
			<div id="tabs-images">
				<table class="tablesorter">
					<thead>
						<tr>
							<th id="upload">Click vào hình ảnh để thay đổi nó</th>
							<th align="center" width="40"><button class="add">Thêm</button></th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
			<div id="tabs-relations">
				<div class="b10">
					<?php echo form_label('Thương hiệu', 'manufacturer_id'); ?>
					<select name="manufacturer_id" id="manufacturer_id" class="input ui-corner-all">
						<option value=""></option>
						<?php foreach ($manufacturers as $manufacturer) echo "<option value=\"{$manufacturer->id}\">{$manufacturer->name}</option>";?>
					</select>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Danh mục', 'category_ids'); ?>
					<div class="scrollbox ui-corner-all">
					<table class="tableselector" width="100%">
					<?php foreach ($categories as $category_id => $category):?>
						<tr>
							<td><input type="checkbox" class="chk_categories" name="categories[]" value="<?php echo $category_id?>" /></td>
							<td><?php echo $category['name']; ?></td>
						</tr>
					<?php endforeach;?>
					</table>
					</div>
					<div style="padding-left: 125px" class="b20"><a href="#" onclick="do_check('chk_categories'); return false;">Chọn tất</a> | <a href="#" onclick="do_uncheck('chk_categories'); return false;">Bỏ chọn tất</a></div>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('File download', 'download_ids'); ?>
					<div class="scrollbox ui-corner-all">
					<table class="tableselector" width="100%">
					<?php foreach ($downloads as $download):?>
						<tr>
							<td><input type="checkbox" class="chk_downloads" name="downloads[]" value="<?php echo $download->id?>" /></td>
							<td><?php echo $download->name; ?></td>
						</tr>
					<?php endforeach;?>
					</table>
					</div>
					<div style="padding-left: 125px" class="b20"><a href="#" onclick="do_check('chk_downloads'); return false;">Chọn tất</a> | <a href="#" onclick="do_uncheck('chk_downloads'); return false;">Bỏ chọn tất</a></div>
					<div class="clear"></div>
				</div>
			</div>
			<div id="tabs-attributes">
				<div class="b20">
					<button id="btn_add_option">Thêm tùy chọn</button>
				</div>
				<div>
					<ul id="product_options"></ul>
				</div>
				<div class="clear"></div>
				<div id="dlg_option" style="display: none;"><input type="text" id="product_option" name="product_option" class="input ui-corner-all" style="width: 300px" /></div>
				<div id="dlg_value" style="display: none;">
					<div>
						<label for="product_value_name" style="width: 80px">Giá trị</label>
						<input type="text" id="product_value_name" name="product_value_name" class="input ui-corner-all" style="width: 200px" />
						<div class="clear"></div>
					</div>
					<div>
						<label for="product_value_quantity" style="width: 80px">Số lượng</label>
						<input type="text" id="product_value_quantity" name="product_value_quantity" class="input ui-corner-all" style="width: 200px" />
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div id="tabs-specials">
				<table class="tablesorter">
					<thead>
						<tr>
							<th>Nhóm khách hàng</th>
							<th width="125">Số lượng</th>
							<th width="150">Ngày bắt đầu</th>
							<th width="150">Ngày kết thúc</th>
							<th align="center" width="40"><button class="add">Thêm</button></th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
			<div id="tabs-seo">
				<div>
					<?php echo form_label('Tags', 'tags'); ?>
					<?php echo form_input($tags); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Đường dẫn', 'alias_uri'); ?>
					<?php echo form_input($alias_uri); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Meta Keyword', 'meta_keyword'); ?>
					<?php echo form_textarea($meta_keyword); ?>
					<div class="clear"></div>
				</div>
				<div>
					<?php echo form_label('Meta Description', 'meta_description'); ?>
					<?php echo form_textarea($meta_description); ?>
					<div class="clear"></div>
				</div>
			</div>
		</div>
	<?php echo form_close();?>
	</div>
	<div class="clear"></div>
</div>
<script type="text/javascript">
tinyMCE.init({
    // General options
    mode : "exact",
    elements : "description",
    theme : "advanced",
    plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

    // Theme options
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,


    // Skin options
    skin : "o2k7",
    skin_variant : "silver",

    // Example content CSS (should be your site CSS)
    content_css : base_path + "assets/css/text.css"
});

$(function() {
	$('.add').button({icons: {primary: "ui-icon-circle-plus"}, text: false});
	$('.remove').button({icons: {primary: "ui-icon-circle-minus"}, text: false});

	$( '#btn_product_options' ).click(function() {
		
	});

	$('#tabs-images .add').click(function() {
		var tbody = $('#tabs-images tbody');
		var field = str_rand();
		var tr = '<tr><td><div id="wrap_'+field+'" class="fl"><img class="thumb_image" id="'+field+'" src="<?php echo $base_path.'assets/uploads/100x100.jpg';?>" alt="100x100" /></div>'
			+'<input type="hidden" name="images[]" id="hidden'+field+'" value="" />'
			+'</td><td align="center"><button class="remove">Xóa</button></td></tr>';
		$(tbody).append(tr);
		$('.remove').button({icons: {primary: "ui-icon-circle-minus"}, text: false});
		
		new AjaxUpload('#wrap_'+field, {
			action: base_path+'backend/filemanager/upload',
			name: 'image',
			autoSubmit: false,
			responseType: 'json',
			onChange: function(file, extension) {
				this.submit();
			},
			
			onSubmit: function(file, extension) {},
			
			onComplete: function(file, json) {			
				if (json.error) {
					alert(json.message);
				} else {
					$('#'+field).replaceWith('<img src="<?php echo $base_path; ?>' + json.image.thumb + '" alt="" class="thumb_image" id="'+field+'" />');
					$('#hidden'+field).val(json.image.file_name);
				}
			}
		});
	});

	$('#tabs-images .remove, #tabs-specials .remove').live('click', function() {
		$(this).parent('td').parent('tr').remove();
	});

	$('#tabs-specials .add').click(function() {
		var tbody = $('#tabs-specials tbody');
		var queue = $('#tabs-specials tbody tr').length;
		var field = str_rand();
		var tr = '<tr><td><select class="input ui-corner-all" name="product_specials['+queue+'][customer_group_id]"><?php foreach ($customer_groups as $customer_group) echo "<option value=\"{$customer_group->id}\">{$customer_group->name}</option>";?></select></td>'
			+'<td><input type="text" class="input ui-corner-all" id="product_specials_price" value="" name="product_specials['+queue+'][price]"></td>'
			+'<td><input type="text" class="input ui-corner-all" id="product_specials_start" value="" name="product_specials['+queue+'][date_start]"></td>'
			+'<td><input type="text" class="input ui-corner-all" id="product_specials_end" value="" name="product_specials['+queue+'][date_end]"></td>'
			+'<td align="center"><button class="remove">Xóa</button></td></tr>';
		$(tbody).append(tr);
		$( "#product_specials_start, #product_specials_end" ).datepicker();
		$('.remove').button({icons: {primary: "ui-icon-circle-minus"}, text: false});
	});

	// Product options
	var poid = $('#product_options > li').length;
	var vlid = new Array();
		
	$('button').button();
	
	$("#dlg_option:ui-dialog, #dlg_value:ui-dialog").dialog( "destroy");
	$("#dlg_option").dialog({
		autoOpen: false,
		width: 350,
		modal: true,
		title: 'Thêm tùy chọn',	
		close: function() {
			$('#product_option').val("");
		}
	});
	
	$("#dlg_value").dialog({
		autoOpen: false,
		width: 350,
		modal: true,
		title: 'Thêm giá trị',		
		close: function() {
			$('#product_value_name, #product_value_quantity').val("");
		}
	});
	
	$('#btn_add_option').click(function() {
		$("#dlg_option").dialog("option", "buttons", {
			'OK': function() {
				var name = $('#product_option').val();
				if(name.length == 0) {
					name = 'Tùy chọn '+poid;
				}
				var li = '<li id="option_'+poid+'"><b>'+name+'</b>'
					+' [ <a href="#" class="add_value">Thêm</a> |'
					+' <a href="#" class="edit_option">Sửa</a> |'
					+' <a href="#" class="remove_option">Xóa</a> ]'
					+' <input type="hidden" name="option['+poid+'][name]" value="'+name+'" />'
					+' <ul id="option_'+poid+'_values"></ul></li>';
				$('#product_options').append(li);
				$('ul').sortable({ placeholder: "ui-state-highlight"});
				poid = poid + 1;
				$(this).dialog('close');
			},
			Cancel: function() {
				$(this).dialog('close');
			}
		}).dialog("open");
	});
	
	$('ul').sortable({ placeholder: "ui-state-highlight"});
	
	$('.remove_value,.remove_option').live('click', function() {
		$(this).parent('li').remove();
		return false;
	});
	
	$('#btn_submit').click(function() {
		$.post(base_path+'welcome/post', $('form').serialize(), function(data) {
			console.log(data);
		});
	});
	
	$('.edit_value').live('click', function() {
		var s = $(this);
		var p = s.parent('li');
		var n = s.siblings('input:first');
		var q = s.siblings('input:eq(1)');

		$('#product_value_name').val(n.val());
		$('#product_value_quantity').val(q.val());
		
		$("#dlg_value").dialog("option", "buttons", { 
			'OK' : function() {
				var name = $('#product_value_name').val(), quantity = $('#product_value_quantity').val();
				
				if(name.length == 0) {
					alert('Hãy điền đủ giá trị');
				} else {
					var li = '<li id="'+p.attr('id')+'">'+name
						+' [ <a href="#" class="edit_value">Sửa</a> |'
						+' <a href="#" class="remove_value">Xóa</a> ]'
						+' <input type="hidden" name="'+n.attr('name')+'" value="'+name+'" />'
						+' <input type="hidden" name="'+q.attr('name')+'" value="'+quantity+'" /></li>';
					p.replaceWith(li);
					$('ul').sortable({ placeholder: "ui-state-highlight"});
					$("#dlg_value").dialog('close');
				}
			},
			Cancel : function() {
				$("#dlg_value").dialog('close');
			}
		}).dialog("open");
		return false;
	});
	
	$('.edit_option').live('click', function() {
		var s = $(this);
		var b = s.siblings('b');
		var p = s.parent('li');
		var n = s.siblings('input');
		
		$('#product_option').val(n.val());
		
		$("#dlg_option").dialog("option", "buttons", { 
			'OK' : function() {
				var name = $('#product_option').val();
				if(name.length == 0) {
					alert('Hãy điền đủ giá trị');
				} else {
					b.text(name);
					n.val(name);
					$('ul').sortable({ placeholder: "ui-state-highlight"});
					$("#dlg_option").dialog('close');
				}
			},
			Cancel : function() {
				$("#dlg_option").dialog('close');
			}
		}).dialog("open");
		return false;
	});
	
	$('.add_value').live('click', function() {
		var id = $(this).parent('li').attr('id').substr(7);
		if(typeof vlid[id] == "undefined") {
			vlid[id] =  $('#option_'+id+'_values li').length;
		}
		
		$("#dlg_value").dialog("option", "buttons", { 
			'OK' : function() {
				var name = $('#product_value_name').val(), quantity = $('#product_value_quantity').val();
				if(name.length == 0) {
					alert('Hãy điền đủ giá trị');
				} else {
					var li = '<li class="option_'+id+'_'+vlid[id]+'">'+name
						+' [ <a href="#" class="edit_value">Sửa</a> | <a href="#" class="remove_value">Xóa</a> ]'
						+'<input type="hidden" name="option['+id+'][value]['+vlid[id]+'][name]" value="'+name+'" />'
						+'<input type="hidden" name="option['+id+'][value]['+vlid[id]+'][quantity]" value="'+quantity+'" /></li>';
					$('#option_'+id+'_values').append(li);
					$('ul').sortable({ placeholder: "ui-state-highlight"});
					vlid[id] = vlid[id] + 1;
					$("#dlg_value").dialog('close');
				}
			},
			Cancel : function() {
				$("#dlg_value").dialog('close');
			}
		})
		.dialog("open");
		return false;
	});
});


function filemanager_image(field) {
	$('#dialog').remove();
	
	$('#body').prepend('<div id="dialog"><iframe src="'+base_path+'backend/filemanager/index/' + encodeURIComponent(field) + '" id="filemanager" frameborder="no" scrolling="auto"></iframe></div>');
	
	$('#dialog').dialog({
		title: 'Quản lý hình ảnh',
		bgiframe: false,
		width: 700,
		height: 400,
		resizable: false,
		modal: true,
		close: function () {
			if ($('#hidden' + field).val()) {
				$.ajax({
					url: base_path + 'backend/filemanager/image',
					type: 'POST',
					data: 'image=' + encodeURIComponent($('#hidden' + field).val()),
					dataType: 'json',
					success: function(data) {
						$('#'+field).replaceWith('<img src="<?php echo $base_path; ?>' + data._100x100 + '" alt="" class="thumb_image" id="'+field+'" />');
					}
				});
			}
		}
	});
};
</script>